<template>
  <view class="content">
    <view class="title-item">
      <view class="title-name">{{ courseName }}</view>
      <view class="title-caidan" @click="ShowHidden = !ShowHidden">
        <image src="../../../static/caidan.png"></image>
      </view>
    </view>
    <!-- 选择菜单框 -->
    <view class="arrivalNavigation" v-if="ShowHidden">
      <view class="d4"></view>
      <view class="sideNavigation">
        <ul style="padding: auto">
          <li @click="handleAddAttend">添加考勤</li>
          <view class="liBottomBorder"></view>
        </ul>
      </view>
    </view>

    <!-- 签到 -->
    <view v-if="parme == 0">
      <u-search
        placeholder="日期格式: YY-MM-DD"
        style="margin-bottom: 20upx"
      ></u-search>
      <view v-for="attend in attendList" :key="attend.attendId">
        <view class="attend-item">
          <view class="attend-item-name">
            <view
              >考勤方式:
              {{ attend.attendType == 1 ? '人脸识别' : '普通考勤' }}</view
            >
            <view>开始时间: {{ attend.attendStart }}</view>
            <view>结束时间: {{ attend.attendEnd }}</view>
          </view>
          <view
            class="attend-item-state"
            @click="handleAttend(attend.attendId)"
          >
            {{ attend.attendState == 'true' ? '已开启' : '已关闭' }}
          </view>
        </view>
      </view>
    </view>
    <!-- 请假 -->
    <view v-if="parme == 1" style="margin-top: 20upx">
      <view v-for="leave in StudentLeave" :key="leave.leaveId">
        <view class="attend-item">
          <view class="attend-item-name">
            <view>请假时间: {{ leave.leaveTime }}到{{ leave.backTime }}</view>
          </view>
          <view
            class="attend-item-state"
          >
            {{
              leave.approvalResult == 2
                ? '批准'
                : leave.approvalResult == 0
                ? '未审批'
                : '不同意'
            }}
          </view>
        </view>
      </view>
      <view class="loginBtn">
      <view class="btnValue" @click="handleLeave">请假</view>
    </view>
    </view>
    <!-- 信息 -->
    <view v-if="parme == 2">
      <view class="content"> 信息 </view>
    </view>
    <u-tabbar
      class="tabbar"
      style="position: absolute; bottom: 20upx"
      :value="parme"
      :fixed="true"
      :placeholder="false"
      :safeAreaInsetBottom="false"
    >
      <u-tabbar-item
        text="签到"
        icon="play-right"
        @click="handleTabbar(0)"
      ></u-tabbar-item>
      <u-tabbar-item
        text="请假"
        icon="share"
        @click="handleTabbar(1)"
      ></u-tabbar-item>
      <u-tabbar-item
        text="信息"
        icon="account"
        @click="handleTabbar(2)"
      ></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
import tTable from '@/common/table/t-table.vue'
import tTh from '@/common/table/t-th.vue'
import tTr from '@/common/table/t-tr.vue'
import tTd from '@/common/table/t-td.vue'
import api from '@/api/student/api.js'
export default {
  data() {
    return {
      allStudent: [], // 所有学生
      addStudentshow: false, // 添加学生
      ShowHidden: false,
      attendShow: false, // 考勤状态弹出框
      modifyShow: false, // 请假状态弹出框
      attendId: '',
      attendState: true,
      parme: 0, // 用于底部导航与展示内容
      attendList: [], // 当前考勤信息
      attendStudentList: [], //课程下人员
      StudentLeave: [], // 请假列表
      course_id: 1,
      courseCode: 1,
      courseName: '',
      student_id: '',
    }
  },
  components: {
    tTable,
    tTh,
    tTr,
    tTd,
  },
  onLoad(option) {
    this.course_id = option.id
    this.student_id = option.studentId
    this.handleLoad('findAttendByMap', {course_id: this.course_id}, 'attendList')
    let parme = {}
    parme.column = 'course_id'
    parme.value = option.id
    this.$http
      .getMethod(api.findCourseByColumn, parme)
      .then((res) => {
        if (res.code != 200) {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
          this.courseName = res.data[0].courseName
          this.courseCode = res.data[0].courseCode
        }
      })
      .catch((error) => {
        console.log(error)
      })
  },
  methods: {
    handleAttend(attendId) {
      uni.navigateTo({
        url:
          '/pages/student/location/location?attendId=' +
          attendId +
          '&studentId=' +
          this.student_id,
      })
    },
    handleLoad(url, parme, list) {
      this.$http
        .getMethod(api[url], parme)
        .then((res) => {
          if (res.code != 200) {
            uni.showToast({
              title: res.message,
              icon: 'none',
            })
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none',
            })
            this[list] = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handleTabbar(par) {
      this.parme = par
      if(par == 0) {
        this.handleLoad('findAttendByMap', {course_id: this.course_id}, 'attendList')
      } else if(par == 1) {
        this.handleLoad('findAllLeaveByStudentId', {courseId: this.course_id, studentId: this.student_id}, 'StudentLeave')
      } else if(par == 2) {
        this.handleLoad('findAttendByMap', {course_id: this.course_id}, 'attendList')
      }
    },
    handleStudentDetailed(id) {
      uni.navigateTo({
        url: '/pages/student/info/studentInfo?page=1&id=' + id,
      })
    },
    handleStudentmodify(id) {
      uni.navigateTo({
        url: '/pages/teacher/modify/modify?page=1&id=' + id,
      })
    },
    handleLeave() {
      uni.navigateTo({
        url: '/pages/student/leave/addLeave?studentId='+ this.student_id+'&courseId='+this.course_id
      })
    }
  },
}
</script>

<style scoped lang="less">
.content {
  width: 95vw;
  height: 95vh;
  padding: 20upx;
  position: relative;
  .title-item {
    display: flex;
    margin-bottom: 20upx;
    .title-name {
      flex: 1;
      text-align: center;
      font-size: 40upx;
    }
    .title-caidan {
      width: 60upx;
      height: 40upx;
      image {
        width: 40upx;
        height: 40upx;
      }
    }
  }

  .arrivalNavigation {
    width: 250rpx;
    position: absolute;
    right: 20rpx;
    z-index: 99;
    .sideNavigation {
      width: 248rpx;
      background-color: #202020;
      color: #eee;
      border-radius: 10rpx;

      li {
        list-style-type: none;
        height: 85rpx;
        text-align: center;
        line-height: 85rpx;
        font-size: 25rpx;
      }
      .liBottomBorder {
        border: 0.1rpx solid #373737;
      }
    }
    .d4 {
      // position: absolute;
      //  	left: 140rpx;
      width: 0;
      height: 0;
      margin-left: 150rpx;
      margin-top: -20rpx;
      border-width: 20rpx;
      border-style: solid;
      border-color: transparent #333 transparent transparent;
      transform: rotate(90deg); /*顺时针旋转90°*/
    }
  }
}

.attend-item {
  display: flex;
  padding: 25upx;
  border: 1upx solid rgba(217, 217, 217, 1);
  border-radius: 20upx;
  margin-bottom: 20upx;
  margin-top: 20upx;
  .attend-item-name {
    flex: 1;
  }
  .attend-item-state {
    width: 20%;
    padding: 25upx;
    border-left: 1upx solid rgba(217, 217, 217, 1);
    text-align: center;
    line-height: 60upx;
  }
}

.student-item {
  display: flex;
  padding: 25upx;
  border: 1upx solid rgba(217, 217, 217, 1);
  border-radius: 20upx;
  margin-bottom: 20upx;
  margin-top: 20upx;
  .student-item-name {
    flex: 1;
  }
  .student-item-state {
    width: 20%;
    padding: 25upx;
    border-left: 1upx solid rgba(217, 217, 217, 1);
    text-align: center;
    line-height: 60upx;
  }
}

.loginBtn {
  width: 100%;
  height: 80upx;
  background: #77b307;
  border-radius: 50upx;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  .btnValue {
    color: white;
  }
}
</style>
